<template>
    <div class="ScaleBox" ref="ScaleBox" :style="{
        width: width + 'px',
        height: height + 'px',
    }">
        <slot></slot>
    </div>
</template>

<script setup lang='ts'>
 
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'
const scale = ref("")
const width = ref(1920)
const height = ref(1080)
const ScaleBox = ref(null);
const getScale = ()=> {
    let wh = window.innerHeight / height.value;
    let ww = window.innerWidth / width.value;
    console.log(ww < wh ? ww : wh);
    return { vw: ww, vh: wh };
}
const setScale = ()=> {
    let scaleObj = getScale();
    if (ScaleBox.value) {
        ScaleBox.value.style.setProperty("--scale", scaleObj.vh);
        ScaleBox.value.style.setProperty(
            "--scale2",
            scaleObj.vw
        );
    }
}
const debounce = (fn, delay)=> {
    let delays = delay || 500;
    let timer;
    return function () {
        let th = this;
        let args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delays);
    };
}

onMounted(() => {
    console.log(`the component is now mounted.`)
    setScale();
    window.addEventListener("resize", debounce(setScale, 100));
})
 
onBeforeUnmount(() => {
    console.log(`the component is now beforeUnmount.`)
})
</script>

<style scoped lang="scss">
#ScaleBox {
    --scale: 1;
}

.ScaleBox {
    position: absolute;
    transform: scale(var(--scale2), var(--scale)) translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    transform-origin: 0 0;
    left: 50%;
    top: 50%;
    transition: 0.3s;
    z-index: 999;
}
</style>